$padding: 40px; // 两边留白
$marginTop: -170px; // 错位
$max-width: 750px;


@mixin ft($font-size,$font-color:#273C3D,$font-weight:400,$font-family:(PingFangSC-Regular,PingFang SC)) {
  font-size: $font-size + px;
  color: $font-color;
  font-weight: $font-weight;
  font-family: $font-family;
}

.wx-share-show{
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
}

.App {
  max-width: $max-width;
  margin: auto;



  .wrap {
    min-height: 100vh;
    background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);
  }

  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .top-pic {
      width: 518px;
      height: 288px;
    }

    .today-title {
      width: 336px;
      height: 60px;
    }

  }

  .today-learn {
    background: #fff;
    text-align: center;
    width: calc(#{$max-width} - 2 * #{$padding});
    margin: $marginTop auto 0;
    padding-top: 170px;
    border-radius: 30px;

    p {
      @include ft(42);
      padding: 40px 40px 50px;
      line-height: 1.5;
      text-align: justify;
    }


  }

  .pink-link {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: -30px 2 * $padding;
    z-index: 1;
  }

  section.voice {
    background: #fff;
    text-align: center;
    width: calc(#{$max-width} - 2 * #{$padding});
    margin: -15px auto;
    border-radius: 30px;
    padding: 40px;
    box-sizing: border-box;

    .voice-img {
      width: 392px;
      height: 60px;
    }

    p {
      @include ft(28);
      margin: 20px auto 40px;
    }

    ul {
      li {
        display: flex;
        margin-top: 40px;

        &.left {
          span {
            background: #F1F2F6;

            &:before {
              position: absolute;
              left: -12px;
              top: 0;
              width: 0;
              height: 0;
              border: 20px solid transparent;
              border-top-color: #F1F2F6;
              content: '';
            }
          }
        }

        &.right {
          flex-direction: row-reverse;
          flex-wrap: nowrap;

          span {
            margin: 15px 30px 0 0;
            background: #FACC1A;
            color: white;

            &:before {
              position: absolute;
              right: -12px;
              top: 0;
              width: 0;
              height: 0;
              border: 20px solid transparent;
              border-top-color: #FACC1A;
              content: '';
            }
          }

          .icon-voice {
            width: 44px;
            height: 44px;
          }
        }

        .avatar {
          width: 106px;
          height: 106px;
          border-radius: 50%;
        }

        span {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          text-align: left;
          margin-top: 15px;
          flex-grow: 0;
          max-width: 400px;
          height: auto;
          position: relative;
          @include ft(36);
          padding: 20px;
          margin-left: 30px;
          border-radius: 20px;
          line-height: 1.5;
        }
      }
    }
  }

  .gain {
    padding: 40px;
    background: #fff;
    text-align: center;
    width: calc(#{$max-width} - 2 * #{$padding});
    border-radius: 30px;
    box-sizing: border-box;
    margin: -20px auto;

    p {
      @include ft(28);
      margin: 20px auto 40px;
    }

    .gain-title {
      width: 336px;
      height: 60px;
    }

    ul {
      li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;
        line-height: 1.5;

        img {
          flex-shrink: 0;
          width: 60px;
          height: 60px;
          margin-right: 20px;
        }

        span {
          text-align: left;
          @include ft(36)
        }
      }
    }
  }

  footer {
    position: fixed;
    bottom: 0;
    width: 750px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(136deg, rgba(255, 211, 34, 1) 0%, rgba(255, 186, 0, 1) 100%);
    border-radius: 40px 0 0 0;
    @include ft(36, #fff, 500);

    img {
      width: 44px;
      height: 44px;
      margin-right: 10px;
    }
  }

  .am-toast-notice-content .am-toast-text.am-toast-text-icon {
    border-radius: 100px !important;
    padding: 1000px !important;
  }

  .wxShare {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .3);

    img {
      position: absolute;
      right: 60px;
      top: 44px;
      width: 570px;
      height: 408px;
    }
  }

  .back {
    position: fixed;
    top: 80px;
    left: 40px;
    width: 31px;
    height: 31px;
  }

  .homework {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(#{$max-width} - 2 * #{$padding});
    padding: 40px;
    background: #fff;
    border-radius: 30px;
    box-sizing: border-box;
    margin: -20px auto 40px;

    img {
      width: 224px;
      height: 60px;
    }

    .canvas {
      width: 590px;
      height: 750px;
      border-radius: 30px;
      margin-top: 20px;
    }

    .audio {
      display: flex;
      align-items: center;
      width: 590px;
      height: 80px;
      background: linear-gradient(180deg, rgba(255, 211, 34, 1) 0%, rgba(255, 186, 0, 1) 100%);
      border-radius: 40px;
      padding: 16px;
      box-sizing: border-box;
      margin-top: 20px;
    }

    .audio-img {
      flex-shrink: 0;
      width: 60px;
      height: 60px;
    }

    .audio-progress {
      position: relative;
      display: flex;
      align-items: center;
      width: 544px;
      height: 4px;
      background: rgba(255, 255, 255, 1);
      border-radius: 5px;
      margin-left: 20px;
    }

    .btn {
      width: 24px;
      height: 24px;
      background: rgba(255, 255, 255, 1);
      border-radius: 50%;
    }

    .small-pic {
      position: relative;
      z-index: 0;
      display: block;
      margin-top: -150px;
      margin-left: 68vw;
      right: 50px;
      width: 164px;
      height: 164px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 4px 36px 0 rgba(122, 137, 130, 0.14);
      border-radius: 12px;
    }

  }

  .cr{
    position: absolute;
    right: 40px;
    bottom: 120px;
    width: 148px !important;
    height: 148px !important;
  }
}
